<template>
	<view class="content">
		<el-button class="close" @click="close">返回</el-button>
		<div v-loading="loading" v-html="List.content"></div>
		<view class="pinglun">
			<view class="title">
				发布评论({{pinglun.length}})
			</view>
			<ul>
				<li v-for="(item,index) in pinglun" :key="index">
					<text>{{item.name}}：</text>
					<text>{{item.content}}</text>
					<text class="createTime">{{item.creatTime | formatDateTwo}}</text>
				</li>
			</ul>
			<view style="margin-top: 20upx;">
				<el-input v-model="form.content" type="textarea" style="width: 100%;" :rows="8" placeholder="输入内容....">
				</el-input>
			</view>
			<text>名称：</text>
			<el-input v-model="form.name" style="width: 400upx;" placeholder="壮士留下姓名"></el-input>
			<el-button class="openBtn" @click="updateChange" type="success">发送评论</el-button>
			<el-button class="openBtn" @click="closeForm" type="info">清空</el-button>
			<el-button class="openBtnTwo" @click="updateChange('all')" type="info">清空消息</el-button>
		</view>

	</view>
</template>

<script>
	import {
		formatDate
	} from "../../../until/index.js"
	export default {
		data() {
			return {
				id: '',
				List: {},
				loading: false,
				form: {},
				pinglun: []
			};
		},
		onLoad(opction) {
			this.get(opction.id)
			this.id = opction.id
		},
		filters: {
			// 时间格式化
			formatDateTwo(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		methods: {
			// 清空
			closeForm() {
				this.form = {}
			},
			// 发送评论
			async updateChange(value) {
				let pinglunItem = {
					name: this.form.name,
					content: this.form.content,
					creatTime: Date.now()
				}
				let pinglunArr = this.List.data.pinglun
				pinglunArr.push(pinglunItem)
				console.log(pinglunArr)
				if (value == 'all') {
					pinglunArr = []
				}
				return await uniCloud.callFunction({
					name: 'pinglun',
					data: {
						tableName: 'blogs-List',
						id: this.id,
						pinglun: pinglunArr
					},
				}).then((res) => {
					uni.hideLoading()
					this.$notify({
						title: '提示',
						message: '发送成功',
						type: 'success'
					});
					this.get(this.id)
					return res.result.msg
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `更新操作执行失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			close() {
				uni.redirectTo({
					url: './blogs'
				})
			},
			// 获取列表
			async get(Id) {
				this.loading = true
				return await uniCloud.callFunction({
					name: 'query',
					data: {
						tableName: 'blogs-List',
						id: Id
					}
				}).then((res) => {
					this.List = res.result.data[0]
					this.pinglun = res.result.data[0].data.pinglun
					this.loading = false
					return res.result.data
				}).catch((err) => {
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.content {
		padding: 20upx;

		.close {
			margin: 20upx 0;
		}

		.pinglun {
			width: 80%;
			height: 1040upx;
			margin: 0 auto;
			margin-top: 100upx;
			border: 1px solid #FFB6C1;
			padding: 20upx;

			.title {
				text-align: center;
			}

			ul {
				height: 500upx;
				overflow-Y: scroll;

				li {
					margin-bottom: 20upx;
				}
			}

			.createTime {
				margin-left: 100upx;
				font-size: 28upx;
			}
		}

		.openBtn {
			margin-top: 20upx;
			margin-left: 10upx;
		}

		.openBtnTwo {
			margin-left: 100upx;
		}
	}
</style>
